<template>
    <HeaderCom/> 
    <el-card class="class_card" :body-style="{ padding: '15px' }">
        <div class="div-top">
            <div class="div-top-span">
                <el-link :underline="false" href="/FenLei">
                    <el-icon class="div-top-span-icon">
                        <Menu />
                    </el-icon>
                    <span>分类</span>
                </el-link>
            </div>
            <div>
                <span class="div-top-k">/</span>
            </div>
            <div class="div-top-type"><span>{{ blog && blog[0].type_name }}</span></div>

        </div>
        <div v-for="item in blog" :key="item.blog_id">
            <div class="card-content">
                <el-image :src="item.cover_image" class="card-image"></el-image>
                <div class="card-text">
                    <div><el-link :underline="false" @click="Article(item.blog_id)">
                            <h6 class="card-text-title">{{ item.blog_title }}</h6>
                        </el-link></div>
                    <div class="card-text-content"><el-link :underline="false" type="info">
                            <p>{{ removeMarkdown(item.blog_content) }}</p>
                        </el-link></div>
                    <div class="div-time-type">
                        <span class="div-time">{{ item.create_time }}</span>
                        <span class="div-type">{{ item.type_name }}</span>
                    </div>

                </div>
            </div>
        </div>
    </el-card>
</template>
  
<script setup lang="ts">
import HeaderCom from "../components/HeaderCom.vue"
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router"
import { getblog } from '@/http'
import { Menu } from '@element-plus/icons-vue'
import { useStore } from 'vuex'

// 引入store
const store = useStore()
//const Route = useRoute(); //获取到值
const router = useRouter();
const blog = ref();
onMounted(async () => {
    let BlogReq = {
        blog_id: 0,
        type_id: store.state.fenLeiId,
    }
    console.log('id:',store.state.fenLeiId)
    blog.value = (await getblog(BlogReq)).data.result

    document.title = blog.value[0].type_name // 动态修改页面标题

})


function Article(id: number) {
    const { href } = router.resolve({ name: 'articleDetails', params: { id: id } }); window.open(href, "_blank")

}

// 去除Markdown标题标记
const removeMarkdown = (text: string) => {
  return text
  .replace(/^#+\s*/, '')      // 去除开头的#号
    .replace(/```.*\n/g, '')    // 去除代码块语言标记
    .replace(/`{3}/g, '')       // 去除代码块标记
    .replace(/`/g, '')          // 去除行内代码标记
    .replace(/\*\*(.*?)\*\*/g, '$1')  // 去除粗体
    .replace(/\*(.*?)\*/g, '$1')      // 去除斜体
    .trim();         // 去除首尾空格
}
</script>
<style scoped lang="scss">
.class_card {
    margin: 0 auto;
    width: 60%;
    border-radius: 8px;
    margin-top: 20px;

    .div-top {
        display: flex;
        height: 30px;
        border-bottom: 1px solid rgb(235, 238, 245);

        .div-top-span span {
            font-size: 15px;
            margin-right: 3px;
        }

        .div-top-k {
            color: rgb(96, 98, 102);
            font-size: 12px;
            margin-right: 6px;
        }

        .div-top-type {
            color: rgb(96, 98, 102);
            font-size: 15px;
            margin-top: 3px;
        }
    }

    .card-content {
        display: flex;
        width: 100%;
        border-bottom: 1px solid rgb(235, 238, 245);
        padding-bottom: 15px;
        padding-top: 15px;
    }

    .card-image {
        width: 250px;
        height: 130px;
        margin-right: 15px;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        transform: translateX(0);
        transition: all 0.3s ease;
    }

    .card-content:hover .card-image {
        transform: translateX(3px);
    }

    .card-text {
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;

    }

    .card-text-title {
        font-size: 18px;
    }

    .card-text-content p {

        font-size: 11px;
        line-height: 20px;
        height: 40px;
        max-height: 40px;
        overflow: hidden;
        /* 超出的文本隐藏 */
        text-overflow: ellipsis;
        /* 溢出用省略号显示 */
        display: -webkit-box;
        /* 将对象作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical;
        /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
        -webkit-line-clamp: 2;
        /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */

    }

    .div-time-type {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
    }

    .div-time {
        font-size: 13px;
        color: rgb(174, 176, 180);
    }

    .div-type {
        font-size: 14px;
        color: rgb(174, 176, 180);
    }
}
</style>